<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{$title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
<link href="{$Think.config.RESOURCEURL}wx_assets/quan/quan_guideView.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
<link href="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.min.js{$Think.config.RESOURCE_VER}"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
<script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
</head>
<body>
<div class="main" id="main"> 
     <ul class="slider" id="slider">
     </ul>
    <div class="footer">
        <div class="share">
            <a class="go-btn" onclick="guide.toDetail()">去看看</a> 
            <a class='shareBtn' id="shareBtn"></a>
            <a class="collectionBtn" id="collectionBtn"></a>
        </div>
    </div>
</div>
<div class="shareTip" id="shareTip"></div>
<div class="collection" id="collectionTip"></div>
<script type="text/html" id="tpl">
    <%if(shareImg1){
         for(var i=0;i<shareImg1.length;i++){
            var item=shareImg1[i];%>
            <li>
                <div class="imgBox">
                    <img src="<%=item.picUrl%>"/>
                    <%if(!i) {%>
                        <div class="info-box">
                            <div class="info"><%=item.picInfo%></div>
                        </div>
                        <div class="mask"></div>
                    <%}%>
                </div>
                
                <%if(i>0 && i< shareImg1.length-1) {%>
                    <div class="info-box1">
                        <%=item.picInfo%>
                    </div>
                <%}%>
            </li>
         <%}%>
    <%}%>
</script>
</body>
<script type="text/javascript">
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var guide={
        guid:"{$guid}",
        init:function(){
            this._initSlide();
        },
        toDetail:function(){
            location.href= "{$detailUrl}";
        },
        _getSlidePic:function(callback){
            $.req.get("call.json?customerId={$customerId}&module=quan&method=getGuideViewImgs&userName={$userName}",{
                params:{
                    "sId":"{$sId}"
                }
            },function(data){
                if(data && !data.code){
                   data.shareImg1=JSON.parse(data.shareImg1);
                   callback && callback(data);
                }
            });
        },
        _initSlide:function(){
            var h=$.util.page.getViewHeight();
            var w=$(window).width();
            this._getSlidePic(function(data){
                data.h=h;
                data.w=w;
                var str=template("tpl", data);
                $("#slider").html(str);
                $("#slider li").height(h-40);
                $('#slider').slider({
                    loop:false,
                    imgZoom:false,
                    arrow:false,
                    autoPlay:true,
                    slide:function(e,to,from){
                        if(to==$("#slider li").size()-1){
                            $(".footer").show();
                        } else{
                            $(".footer").hide();
                        }
                    }
                })
                .height(h);
                $(".imgBox img").eq(0).load(function(){
                    var imgBoxH=$(".imgBox").height();
                    $(".info-box .info").css("marginTop",(imgBoxH-$(".info-box .info").height()-80)/2);
                    $("#slider li .mask").css("height",imgBoxH);
                    $(".info-box").show();
                });
                $(".ui-slider-dots").css("marginLeft",$(".ui-slider-dots").width()/2*-1); 
                if($("#slider li").size()<2){
                    $(".footer").show();
                }
                if($(".ui-slider-dots b").size()<2){
                    $(".ui-slider-dots").hide();
                }
            });
            $("#shareBtn").tap(function(){
                $("#shareTip").height(h).show().css("opacity",.8);
            });
            $("#collectionBtn").tap(function(){
                $("#collectionTip").height(h).show().css("opacity",.8);
            });
            $("#collectionTip,#shareTip").tap(function(){
                $(this).hide();
            });
        },
        getShareUrl:function(){
            var p=$.util.getParamAsObject();
            var shareUrl="";
            var me=this;
            var params={
                "fromGuid":me.guid,
                "qId":p.qId,
                "id":p.id,
                "miUId":p.miUId,
                "fromUId":p.miUId
            }
            params=encodeURIComponent(JSON.stringify(params));
            shareUrl=baseUrl+'call.html?customerId={$customerId}&module=quan&method=getGuideView&scope=1&params='+params;
            return shareUrl;
        },
        share:function(){
            var p=$.util.getParamAsObject();
            var me=this;
            $.req.get("call.json?customerId={$customerId}&module=quan&method=saveShare&userName={$userName}",{
                params:{
                    "qId":p.qId,
                    "sId":"{$sId}",
                    "guid":me.guid,
                    "fromGuid":p.fromGuid || "",
                    "miUId":p.miUId,
                    "shareType":1,
                    "fromPage":"guide"
                }
            },function(data){
                if(data && !data.code){
                   me.guid=data.guid;
                }
            });
        }
    };
    var shareUrl=guide.getShareUrl();
    wx_share.init({
        "title":"{$title}",
        "desc":'{$recommend}',
        "link":shareUrl,
        "imgUrl":"{$shareImg}",
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": {$pkg.timestamp},
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        success:function(config,shareType){
            var p=$.util.getParamAsObject();
            $.req.get("call.json?customerId={$customerId}&module=quan&method=saveShare&userName={$userName}",{
                params:{
                    "qId":p.qId,
                    "sId":"{$sId}",
                    "guid":guide.guid,
                    "fromGuid":p.fromGuid || "",
                    "miUId":p.miUId,
                    "shareType":shareType,
                    "fromPage":"guide"
                }
            },function(data){
                if(data && !data.code){
                   guide.guid=data.guid;
                }
            });
        }
    });
    guide.init();
</script>

</html>